<template>
	<view class="wrap">
		<!-- <view class="header">
            :style="{height: navHeight+'px',paddingTop: statusBarHeight+'px'}"
            <view class="nav">
                <view class="nav_text">金考典题库管理</view>
            </view>
        </view> -->
		<NavBar title="魔考题库管理" :hasBack="true"></NavBar>
		<view class="searchbox">
			<u--input v-model="searchText" placeholder="请输入搜索关键字" prefixIcon="search" shape="circle"
				prefixIconStyle="color: #ffffff;" placeholderClass="placeholderStyle" style="height: 72rpx;background: #636883;border-radius: 36rpx;
border: 2rpx solid #FFFFFF;;"></u--input>
		</view>
		<view class="content">
			<view class="sel_wrap">
				<view class="sel_left">筛选分类</view>
				<view class="sel_right">
					<view class="sel_box" @click="showFirstOption">
						<view class="sel_text">{{ firstText || '一级科目' }}</view>
						<u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
					</view>
					<view class="sel_box" @click="showSecondOption">
						<view class="sel_text">{{ secondText || '二级科目' }}</view>
						<u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
					</view>
					<view class="sel_box" @click="showTimeOption">
						<view class="sel_text">{{ timeText || '时长' }}</view>
						<u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
					</view>
				</view>
			</view>

			<view class="setmeal_list">
				<view class="list_top">
					<view class="top_title">
						<img class="list_icon" src="@/static/img/list_icon.png" alt="">
						套餐列表
					</view>
					<!-- <view class="top_title dis_flex just_bt al_center">
						<u-checkbox></u-checkbox>
						全选
					</view> -->
				</view>
				<u-empty mode="list" v-if="!list.length"></u-empty>
				<view class="list_container">
					<u-list @scrolltolower="scrolltolower" height="990rpx">
						<u-list-item v-for="item in list" :key="item.BuyId">
							<view class="list_box" @click="chooseItem(item)">
								<view v-if="active == item.Id" class="active_radio_box">
									<view class="active_radio_box_inside"></view>
								</view>
								<view v-else class="radio_box"></view>
								<view class="list_detail">
									<view class="det_title">{{ item.MealName }}</view>
									<view class="item_text">{{ item.SubjectName }} {{ item.Time }}</view>
									<view class="det_bottom">
										<view class="red_price">
											<view>￥</view>
											<view class="big_price">{{ item.SalePrice }}</view>
										</view>
										<view class="det_old_price">原价：￥{{ item.MealPrice }}</view>
										<view class="det_new_price">打折后：￥{{ item.SalePrice }}</view>
									</view>
								</view>
							</view>
						</u-list-item>
					</u-list>
				</view>
			</view>

			<view class="buy_box" @click="toBuy">
				购买
			</view>
		</view>
		<PopWindow />
		<u-picker :show="firstshow" :columns="subjectFirstList" keyName="SubjectName" @confirm="confirmFirstOption"
			@cancel="hideFirstOption"></u-picker>
		<u-picker :show="secondshow" :columns="subjectSecondList" keyName="SubjectName" @confirm="confirmSecondOption"
			@cancel="hideSecondOption"></u-picker>
		<u-picker :show="timeshow" :columns="timeList" @confirm="confirmTimeOption" @cancel="hideTimeOption"></u-picker>
	</view>
</template>

<script>
import PopWindow from '@/components/PopWindow'
export default {
	data () {
		return {
			active: '',
			subjectFirstList: [],
			firstshow: false,
			firstText: "",
			firstId: '',
			secondshow: false,
			secondText: "",
			secondId: '',
			subjectSecondList: [],
			timeList: [['一个月', '三个月', '一年', '三年']],
			timeshow: false,
			timeText: '',
			pageIndex: 1,
			pageSize: 10,
			searchText: '',
			scrollFlag: true,
			list: [],
			checkedData: [],
		}
	},
	onLoad () {
		this.getCategoryList()
		this.getMealList()
	},
	methods: {
		// 搜索
		toSearch (item) {
			this.search = item
			this.list = []
			this.checkedData = []
			this.scrollFlag = true
			this.PageIndex = 1
			this.getDataList()
		},
		// 获取第一个下拉选
		async getCategoryList () {
			const res = await this.$http.get('mokao/category')
			this.subjectFirstList = [res.Data]
		},
		// 一级科目
		showFirstOption () {
			this.firstshow = true
		},
		hideFirstOption () {
			this.firstshow = false
		},
		confirmFirstOption (data) {
			this.firstshow = false
			if (data.value[0].SubjectName !== this.firstText) {
				this.firstText = data.value[0].SubjectName
				this.firstId = data.value[0].Id
				this.pageIndex = 1
				this.getSubjectList()
				this.getMealList()
				this.secondText = ''
				this.secondId = ''
			}
		},
		// 二级科目
		async getSubjectList () {
			const res = await this.$http.get(`mokao/subjects/${this.firstId}`)
			this.subjectSecondList = [res.Data]
		},
		// 二级科目
		showSecondOption () {
			if (!this.firstText) {
				return uni.showToast({ title: "请选择一级科目", icon: 'none' })
			}
			this.secondshow = true
		},
		hideSecondOption () {
			this.secondshow = false
		},
		confirmSecondOption (data) {
			this.secondText = data.value[0].SubjectName
			this.secondId = data.value[0].Id
			this.hideSecondOption();
			this.pageIndex = 1
			this.getMealList()
			// this.getSubjectList()
		},
		//时长
		showTimeOption () {
			this.timeshow = true
		},
		confirmTimeOption (data) {
			this.timeshow = false
			this.timeText = data.value[0]
			this.pageIndex = 1
			this.getMealList()
		},
		hideTimeOption () {
			this.timeshow = false
		},
		scrolltolower () {
			if (this.scrollFlag) {
				this.pageIndex = this.pageIndex + 1
				this.getMealList()
			}
		},
		//点击每一个套餐或单科
		chooseItem (item) {
			this.active = item.Id
			console.log(this.checkedData)
		},
		// 获取课程列表
		async getMealList () {
			uni.showLoading({ title: "加载中" });
			let obj = {
				PageSize: this.pageSize,
				PageIndex: this.pageIndex,
			}
			if (this.firstId) {
				obj.CategoryId = this.firstId;
			}
			if (this.secondId) {
				obj.SubjectId = this.secondId;
			}
			if (this.timeText != '时长') {
				obj.Time = this.timeText;
			}
			if (this.searchText) {
				obj.KeyWord = this.searchText;
			}
			const res = await this.$http.get('mokao/meals', obj)
			uni.hideLoading()
			if (res.Data.length == 0) {
				this.scrollFlag = false
			}
			res.Data.forEach(item => {
				item.isChecked = false
			})
			this.list = this.pageIndex == 1 ? res.Data : this.list.concat(res.Data)

		},
		//购买
		async toBuy () {
			if (!this.active) {
				return uni.showToast({
					icon: "none",
					title: "请选择要购买的产品"
				})
			}
			//创建订单
			const res = await this.$http.post(`/mokao/order/${this.active}`)
			if (res.Code != 200) {
				return uni.showToast({ title: res.Msg, icon: "none" });
			}
			//发起支付
			this.wxBuy(res.Data.PayAmount, res.Data.Id)
		},
		async wxBuy (total, orderId) {
			let that = this;
			// 预付款
			let obj = {
				openId: uni.getStorageSync('openid'),
				total_fee: total,
				orderId: orderId
			}
			const res = await this.$http.get('pay/prepay', obj)
			let resData = JSON.parse(res.Data.Data)
			wx.requestPayment({
				timeStamp: resData.timeStamp,
				nonceStr: resData.nonceStr,
				signType: resData.signType,
				paySign: resData.paySign,
				package: resData.package,
				success () {
					uni.showToast({ title: "购买成功" })
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm.setTabs(2)
					uni.navigateBack()
				}
			})
		},
	},
	components: {
		PopWindow
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	background-color: #79829A;
	// background-image: url('../../../static/img/bg2.png');
	background-size: 750rpx 450rpx;
	background-repeat: no-repeat;
}

.searchbox {
	padding: 32rpx 36rpx;
	box-sizing: border-box;

	/deep/.placeholderStyle {
		font-size: 28rpx;
		color: #ffffff !important;
	}
}

.content {
	//height: calc(100vh - 380rpx);
	background: #fff;
	border-radius: 34rpx 34rpx 0 0;
	margin-top: 36rpx;
}

.nav {
	width: 100%;
	padding: 26rpx 36rpx;

	.nav_text {
		font-weight: 400;
		font-size: 48rpx;
		color: #FFFFFF;
	}
}

.sel_wrap {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 38rpx 28rpx 28rpx;
	background: #FFFFFF;
	border-radius: 34rpx;
	margin-top: -36rpx;
	box-sizing: border-box;

	.sel_left {
		width: 60rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
		line-height: 28rpx;
		padding-right: 12rpx;
	}

	.sel_right {
		display: flex;
		flex: 1;

		.sel_box {
			flex: 1;
			padding: 18rpx 20rpx 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F5F5F5;
			border-radius: 12rpx;
			box-sizing: border-box;

			.sel_text {
				font-size: 26rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 120rpx;
			}

			&:last-child {
				color: #000000;
				margin-right: 0;
			}
		}

		.sel_box+.sel_box {
			margin-left: 12rpx;
		}
	}
}

.setmeal_list {
	width: 100%;
	background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
	border-radius: 32rpx;
	padding: 26rpx 28rpx 100rpx 26rpx;
	box-sizing: border-box;
	background-size: 100% 330rpx;
	background-repeat: no-repeat;
	border-radius: 32rpx;

	.list_top {
		display: flex;
		justify-content: space-between;

		.list_icon {
			width: 34rpx;
			height: 34rpx;
			margin-right: 18rpx;
		}
	}

	.list_container {
		.list_box {
			display: flex;
			padding-top: 72rpx;

			.radio_box {
				width: 36rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				border: 2rpx solid #D2D2D2;
				flex-shrink: 0;
			}

			.active_radio_box {
				width: 36rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 50%;
				border: 2rpx solid #0051FF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				.active_radio_box_inside {
					width: 24rpx;
					height: 24rpx;
					background: #0051FF;
					border-radius: 50%;
					border: 2rpx solid #0051FF;
				}
			}

			&:first-child {
				padding-top: 50rpx;
			}

			.list_detail {
				padding-left: 18rpx;

				.det_title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.item_text {
					font-weight: bold;
					font-size: 26rpx;
					color: #999999;
					padding-top: 12rpx;
				}

				.det_bottom {
					display: flex;
					align-items: flex-end;
					padding-top: 12rpx;

					.red_price {
						display: flex;
						align-items: flex-end;
						font-family: DIN;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF0000;
						padding-right: 74rpx;

						.big_price {
							font-size: 48rpx;
							line-height: 1;
						}
					}

					.det_old_price {
						padding-right: 48rpx;
						font-size: 28rpx;
						color: #999999;
					}

					.det_new_price {
						font-size: 28rpx;
						color: #999999;
					}
				}
			}
		}
	}
}

.no_data {
	text-align: center;
	font-size: 38rpx;
	padding-top: 38rpx;
	font-weight: 500;
}

.buy_box {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 102rpx;
	line-height: 102rpx;
	background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
	border-radius: 0rpx;
	text-align: center;


	font-family: PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #FFFFFF;
}
</style>